<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接二维码生成器</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="icon">
                <i class="fas fa-qrcode"></i>
            </div>
            <h1>二维码生成器</h1>
            <p>输入任意链接，快速生成二维码</p>
        </div>
        
        <div class="input-section">
            <div class="input-group">
                <i class="fas fa-link input-icon"></i>
                <input type="url" id="urlInput" placeholder="请输入要转换的链接..." />
                <button id="generateBtn" class="generate-btn">
                    <i class="fas fa-magic"></i>
                    生成二维码
                </button>
            </div>
            <div class="input-hint">
                支持任意有效的网址，如：https://www.example.com
            </div>
        </div>
        
        <div class="result-section" id="resultSection">
            <div class="qr-container">
                <div id="qrcode"></div>
                <div class="qr-actions">
                    <button id="downloadBtn" class="action-btn">
                        <i class="fas fa-download"></i>
                        下载二维码
                    </button>
                    <button id="copyBtn" class="action-btn secondary">
                        <i class="fas fa-copy"></i>
                        复制链接
                    </button>
                </div>
            </div>
            <div class="url-display">
                <strong>生成的链接：</strong>
                <span id="displayUrl"></span>
            </div>
        </div>
        
        <div class="features">
            <div class="feature">
                <i class="fas fa-bolt"></i>
                <h3>快速生成</h3>
                <p>即时生成高质量二维码</p>
            </div>
            <div class="feature">
                <i class="fas fa-mobile-alt"></i>
                <h3>移动友好</h3>
                <p>完美适配各种设备屏幕</p>
            </div>
            <div class="feature">
                <i class="fas fa-download"></i>
                <h3>一键下载</h3>
                <p>支持PNG格式图片下载</p>
            </div>
        </div>
    </div>

    <script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
    <script src="script.js"></script>
</body>
</html> 